<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>菜单树</title>
	<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
	<p>注：右键单击节点以完成添加等功能</p>
	<div style="margin:20px 0;"></div>
	<div class="easyui-panel" style="padding:5px">
		<ul id="tt" class="easyui-tree" data-options="
				url: '/acc/treecs',
                method: 'get',
                lines:true,
				animate: true,
				onContextMenu: function(e,node){
					e.preventDefault();
					$(this).tree('select',node.target);
					$('#mm').menu('show',{
						left: e.pageX,
						top: e.pageY
					});
				}
			"></ul>
	</div>
	<div id="mm" class="easyui-menu" style="width:120px;">
		<div onclick="append()" data-options="iconCls:'icon-add'">添加</div>
		<div class="menu-sep"></div>
		<div onclick="expand()">展开</div>
		<div onclick="collapse()">关闭</div>
    </div>
    <div id="dd">
        <form>
            <table>
                <tr>
                    <td><input type="hidden" id="menuid"></td>
                </tr>
                <tr>
                    <td>菜单名称</td>
                    <td><input type="text" id="menuname"></td>
                </tr>
                <tr>
                    <td>菜单地址</td>
                    <td><input type="text" id="menuurl"></td>
                </tr>
                <tr>
                    <td><input type="hidden" id="pmenuid"></td>
                </tr>
                <tr>
                    <td>树形图标</td>
                    <td><input type="text" id="micon"></td>
                </tr>
               
            </table>
        </form>
    </div>
    <script type="text/javascript">
           var chuan;
           $('#tt').tree({
            onSelect: function(node){
                chuan = node.id;
            }
        });
        
        
        function clearFormVal(){
            menuid:$("#menuid").val("");
            menuname:$("#menuname").val("");
            menuurl:$("#menuurl").val("");
            pmenuid:$("#pmenuid").val("");
            micon:$("#micon").val("");
        };
        $("#dd").hide();
		function append(){
            clearFormVal();
                    $('#dd').dialog({    
                        title: 'My Dialog',    
                        width: 400,    
                        height: 260,  
                        closed: false,    
                        cache: false,    
                        modal: true,
                        buttons:[{
                            text:'保存',
                            handler:function(){
                                $.ajax({
                                    data: {menuid:$("#menuid").val(),menuname:$("#menuname").val(),menuurl:$("#menuurl").val(),pmenuid:chuan,micon:$("#micon").val()},
                                    url: '/acc/inMenu',
                                    dataType: 'json',
                                    type:"post",
                                    cache: false,
                                    timeout: 5000,
                                    success: function(data){
                                        //var data = $.parseJSON(data);
                                        if(data.length != 0){
                                            $.messager.show({
	                                            title:'系统消息',
	                                            msg:'您的操作已成功！',
	                                            timeout:2000,
	                                            showType:'slide'
                                            });
                                            //$("#dd").dialog('close');
                                            top.location.reload();//刷新页面
                                        }else{
                                            $.messager.show({
	                                            title:'系统消息',
	                                            msg:'您的操作已失败！',
	                                            timeout:2000,
	                                            showType:'slide'
                                            });
                                        }
                                        
                                    },
                                });
                            }
                        }]    
                        });
		}
		function collapse(){
			var node = $('#tt').tree('getSelected');
			$('#tt').tree('collapse',node.target);
		}
		function expand(){
			var node = $('#tt').tree('getSelected');
			$('#tt').tree('expand',node.target);
		}
	</script>
</body>
</html>